<template>
  <div class="home-box">
    <!-- NavBar 导航栏 -->
    <van-nav-bar class="nav-box" :fixed="true">
      <template #title>
        <van-button
          round
          size="mini"
          icon="search"
          v-if="sishow"
          to='/search'
          >搜索</van-button
        >
        <van-cell-group v-else>
          <van-field
            class="scerch-input"
            placeholder="想搜点啥...."
            ref="inpt"
            @keydown.enter="sishow = !sishow"
          />
        </van-cell-group>
      </template>
    </van-nav-bar>
    <!-- NavBar 导航栏 -->

    <!-- Tab 标签页 频道列表-->
    <van-tabs
      animated
      swipeable
      class="channel-tab"
      sticky
      offset-top="46"
      v-model="active"
    >
      <van-tab :title="item.name" v-for="item in channels" :key="item.id">
        <!-- 文章列表组件 -->
        <atrs :channel="item" />
        <!-- 文章列表组件 -->
      </van-tab>

      <!-- 频道编辑按钮 -->
      <template v-slot:nav-right>
        <div class="placeholer"></div>
        <i
          class="iconfont icon-gengduo"
          @click="ischanelshow = !ischanelshow"
        ></i>
      </template>
      <!-- 频道编辑按钮 -->
    </van-tabs>
    <!-- Tab 标签页 频道列表-->

    <!-- 编辑频道弹出层 -->
    <van-popup
      v-model="ischanelshow"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <channelenit
        :channels="channels"
        :active="active"
        @tochannel="tochannel"
        @send='send'
      ></channelenit>
    </van-popup>
    <!-- 编辑频道弹出层 -->
  </div>
</template>

<script>
import { channels } from "@/api/user.js";
import atrs from "./components/atrs";
import channelenit from "./components/channelsenit";
export default {
  components: {
    atrs,
    channelenit,
  },
  data() {
    return {
      active: 0, //频道索引
      sishow: true,
      ischanelshow: false, //编辑频道弹出层显示状态
      channels: [], //文章列表
    };
  },
  created() {
    this.getChannel();
  },
  methods: {
    // 搜索按钮点击，显示搜索框，并获取焦点
    setIsshow() {
      this.sishow = !this.sishow;
      // console.log(this);
      this.$nextTick(function () {
        this.$refs.inpt.focus();
      });
    },
    // 获取我的频道列表
    async getChannel() {
      if (this.$store.state.usertoken) {
        // 登录
        try {
          const { data: res } = await channels();
          this.channels = res.data.channels;
          // console.log(res);
        } catch (err) {
          console.log(err, "获取失败");
        }
      } else {
        // 未登录
        this.channels = JSON.parse(
          window.localStorage.getItem("TOUTIAO_channels")
        );
      }
    },
    //自定义事件方法 编辑频道跳转到首页
    tochannel(index, ischanelshow = false) {
      // 根据频道索引切换频道
      this.active = index;
      // 控制频道编辑弹层
      this.ischanelshow = !ischanelshow;
    },
    // 从channel组件获取mychannels
    send(value){
       this.channels=value
    }
  },
};
</script>

<style lang="less" scoped>
.home-box {
  padding-bottom: 100px;
}
.nav-box {
  .scerch-input {
    padding: 0;
  }
}
.channel-tab {
  padding-top: 92px;
  //placeholer 阻止频道列表计算的div
  .placeholer {
    height: 43px;
    width: 58px;
    flex-shrink: 0;
  }
  .iconfont {
    display: flex;
    font-size: 60px;
    position: fixed;
    right: 0;
    height: 86px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    // opacity: .902;
    // 盒子阴影
    box-shadow: -20px 10px 20px #fff; //设置编辑按钮的阴影
  }
}
</style>